<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/echarts.min.js"></script>
</head>
<body>
<div id="app">
    <div id="main" style="width: 600px;height:400px;"></div>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            datas:[]
        },
        methods: {
            initData(){
                axios.get("/activity/group").then(resp=>{
                    let data=resp.data;
                    this.datas=data.result;



                    let monthX=[];
                    let countY=[];
                    this.datas.forEach(item=>{
                        monthX.push(item.year);
                        countY.push(item.count)
                    })
                    console.log(monthX,countY)
                    var myChart = echarts.init(document.getElementById('main'));

                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '月份统计'
                        },
                        tooltip: {},
                        legend: {
                            data: ['活动数量']
                        },
                        xAxis: {
                            data: monthX
                        },
                        yAxis: {},
                        series: [
                            {
                                name: '活动数量',
                                type: 'bar',
                                data:countY
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                })
            }
        },
        created(){
            this.initData();
        }
    })
</script>
</body>
</html>